<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ECharts-基本线性图及其配置要求</title>
    <script src="${pageContext.request.contextPath}/Resource/js/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/Resource/echarts/echarts.common.min.js"></script>
    <link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="box" style="height:300px;width: 800px;"></div>
</div>
<script>
    var myChart = echarts.init(document.getElementById('box'));
    var num1;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-1-1",
            time:"2021-1-31",
        },
        success : function(data) {   //成功返回数据
            num1=data;
        }
    });
    var num2;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-2-1",
            time:"2021-2-28",
        },
        success : function(data) {   //成功返回数据
            num2=data;
        }
    });

    var num3;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-3-1",
            time:"2021-3-31",
        },
        success : function(data) {   //成功返回数据
            num3=data;
        }
    });

    var num4;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-4-1",
            time:"2021-4-30",
        },
        success : function(data) {   //成功返回数据
            num4=data;
        }
    });

    var num5;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-5-1",
            time:"2021-5-31",
        },
        success : function(data) {   //成功返回数据
            num5=data;
        }
    });

    var num6;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-6-1",
            time:"2021-6-30",
        },
        success : function(data) {   //成功返回数据
            num6=data;
        }
    });

    var num7;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-7-1",
            time:"2021-7-31",
        },
        success : function(data) {   //成功返回数据
            num7=data;
        }
    });

    var num8;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-8-1",
            time:"2021-8-31",
        },
        success : function(data) {   //成功返回数据
            num8=data;
        }
    });

    var num9;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-9-1",
            time:"2021-9-30",
        },
        success : function(data) {   //成功返回数据
            num9=data;
        }
    });

    var num10;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-10-1",
            time:"2021-10-31",
        },
        success : function(data) {   //成功返回数据
            num10=data;
        }
    });

    var num11;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-11-1",
            time:"2021-11-30",
        },
        success : function(data) {   //成功返回数据
            num11=data;
        }
    });

    var num12;
    $.ajax({
        url : "/Anonymous/selectRedeemRecord.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{
            redeemTime:"2021-12-1",
            time:"2021-12-31",
        },
        success : function(data) {   //成功返回数据
            num12=data;
        }
    });
    option = {
        title: {
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#F1F1F3'
            },
            left: '6%'
        },
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            formatter:'{a}</br>{b}:{c}元'
        },
        legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            data: ['营业额'],
            right: '4%',
            textStyle: {
                fontSize: 12,
                color: '#292f39'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月','9月','10月','11月','12月']
        }],
        yAxis: [{
            type: 'value',
            name: '单位(元)',
            min: 0,
            max: 500,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#33627B'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#33627B'
                }
            }
        }],
        series: [{
            name: '营业额',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 3
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(205,52,42, 0.5)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(235,235,21, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                },
            },
            itemStyle: {
                normal: {

                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(205,52,42,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(235,235,21,1)'
                    }])
                },
                emphasis: {
                    color: 'rgb(99,250,235)',
                    borderColor: 'rgba(99,250,235,0.2)',
                    extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);',
                    borderWidth: 10
                }
            },
            data: [num1,num2,num3, num4, num5, num6, num7, num8,num9,num10,num11,num12]
        }]
    };
    myChart.setOption(option);
</script>
</body>
</html>